<template>
  <div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      class="one"
      :style="{width:pagesStore.sizeNum + 'px',height:pagesStore.sizeNum + 'px'}"
    >
      <g clip-path="url(#clip-path-104_4436)">
        <path
          d="M1 13.75C1 14.4375 1.57273 15 2.27273 15L13.7273 15C14.4273 15 15 14.4375 15 13.75L15 11.25L1 11.25L1 13.75ZM11.0227 12.8125L12.6136 12.8125C12.8682 12.8125 13.0909 13.0312 13.0909 13.2813C13.0909 13.5313 12.8682 13.75 12.6136 13.75L11.0227 13.75C10.7682 13.75 10.5455 13.5313 10.5455 13.2813C10.5455 13.0312 10.7682 12.8125 11.0227 12.8125ZM12.7409 5.875C12.5818 5.34374 12.0727 5 11.5318 5L4.46818 5C3.92726 5 3.41818 5.34374 3.25908 5.875L1 10.3125L15 10.3125L12.7409 5.875ZM11.5 9.4375L11.5 9.6875C11.4682 9.37499 11.3409 9.09374 11.15 8.84375C10.9591 8.59375 10.7364 8.34374 10.45 8.15624C10.1636 7.96874 9.84545 7.8125 9.46363 7.68749C9.11364 7.5625 8.73182 7.49999 8.31817 7.49999L8.06364 7.49999C7.96818 7.49999 7.90454 7.49999 7.80909 7.53125C7.71363 7.53125 7.64999 7.5625 7.58637 7.5625C7.52272 7.5625 7.42727 7.59374 7.36363 7.625L7.36363 8.71874L4.81818 7.03124L7.36363 5.375L7.36363 6.3125C7.93636 6.3125 8.47727 6.40625 8.95454 6.56249C9.46363 6.71875 9.90909 6.93749 10.2591 7.21874C10.6409 7.49999 10.9273 7.84375 11.15 8.21875C11.4045 8.59375 11.5 8.99999 11.5 9.4375Z"
          :fill="!theme.includes('2e3c56')? '#224477' : '#fff'"
        ></path>
        <circle
          cx="12.9990234375"
          cy="2.99951171875"
          r="3"
          stroke="rgba(226, 233, 251, 1)"
          stroke-width="1"
          fill="#FF8D1A"
        ></circle>
      </g>
      <defs>
        <clipPath id="clip-path-104_4436">
          <path d="M0 16L16 16L16 0L0 0L0 16Z" fill="white" />
        </clipPath>
      </defs>
    </svg>
  </div>
</template>

<script setup>
import useSettingsStore from "@/store/modules/settings";
import usePagesStore from '@/store/modules/pages'
const pagesStore = usePagesStore()
const settingsStore = useSettingsStore();
const topTheme = computed(() => settingsStore.topTheme);
const theme = computed(() => settingsStore.theme);
const topNav = computed(() => settingsStore.topNav);

defineProps({
  isActive: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits();
</script>

<style scoped>
.one{
  display: inline-block;
  vertical-align: middle;
}</style>
